<template>
  <div class="operationLog">
    <el-card shadow="hover">
      <div class="searchBox">
        <el-input
          placeholder="请输入账号"
          v-model="value"
          class="input-with-select"
        >
          <el-select
            v-model="select"
            slot="prepend"
            placeholder="请选择"
            @change="change"
          >
            <el-option label="用户ID" value="1"></el-option>
            <el-option label="账号" value="2"></el-option>
          </el-select>
        </el-input>

        <el-button class="btn" @click="systemMessageBth">查找搜索</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="log_id" label="日志ID"> </el-table-column>
        <el-table-column prop="account" label="账号"> </el-table-column>
        <el-table-column prop="id" label="账号ID"> </el-table-column>
        <el-table-column prop="ip" label="IP"> </el-table-column>
        <el-table-column prop="time" label="时间"> </el-table-column>
        <el-table-column prop="module" label="操作模块"> </el-table-column>
        <el-table-column prop="content" label="内容日志"> </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import { SystemLog } from "@/api/SystemManagement";
export default {
  components: { Pagination },
  inject: ["reload"],
  data() {
    return {
      select: "1",
      value: "",
      account: "",
      id: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      total: 0,
      page: 1, //页码
      pageSize: 10, //每页条数
    };
  },
  methods: {
    change() {
      this.value = "";
      this.account = "";
      this.id = "";
    },
    systemMessageBth() {
      this.page = 1;
      this.getList();
    },
    //分页
    getList() {
      SystemLog({
        account: this.account,
        id: this.id,
        page: this.page,
        pageSize: this.pageSize,
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = parseInt(res.data.total);
        }
      });
    },
  },
  created() {
    this.getList();
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        if (this.select == 1) {
          this.id = val;
        }
        if (this.select == 2) {
          this.account = val;
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
.operationLog {
  margin: 30px;
  height: 100%;
  .searchBox {
    display: flex;
    .el-input {
      width: 300px;
      /deep/ .el-input-group__prepend {
        width: 100px;
      }
    }
  }
}
</style>